<template>
    <div class="app-card">
        <el-card class="el-card-style">
            <!-- 操作按钮区域 -->
            <div>
                <div>
                    <el-button
                        type="primary"
                        :icon="Search"
                    >
                        查询
                    </el-button>
                </div>
            </div>

            <table-panel
                style="margin-top: 10px;"
                :loading="tablePanelConfig.loading"
                :tableData="tablePanelConfig.tableData"
                :height="tablePanelConfig.height"
                :columns="tablePanelConfig.columns"
                :total="tablePanelConfig.total"
                :currentPage="tablePanelConfig.currentPage"
                :pageCount="tablePanelConfig.pageCount"
                :isSelect="false"
                @handleCurrentChange="handleCurrentChange"
            />
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
    Search
} from '@element-plus/icons-vue'
import TablePanel from '@/components/company/TablePanel.vue'
import http from '@/api/http'

// 变量
const tablePanelConfig = ref(
    {
        loading: false,
        tableData: [
            {
                '姓名': '测试名称一',
                '性别': '男',
                '民族': '维吾尔族',
                '学历': '研究生',
                '审批状态': '待审批',
            },
            {
                '姓名': '测试名称二',
                '性别': '男',
                '民族': '维吾尔族',
                '学历': '研究生',
                '审批状态': '待审批',
            }
        ],
        height: 'calc(100vh - 240px)',
        columns: [
            {
                label: '姓名',
                prop: '姓名'
            },
            {
                label: '性别',
                prop: '性别',
                minWidth: '55'
            },
            {
                label: '民族',
                prop: '民族',
                minWidth: '90'
            },
            {
                label: '籍贯',
                prop: '籍贯'
            },
            {
                label: '身份证号',
                prop: '身份证号'
            },
            {
                label: '出生日期',
                prop: '出生日期'
            },
            {
                label: '学历',
                prop: '学历',
                minWidth: '70'
            },
            {
                label: '审批状态',
                prop: '审批状态',
                minWidth: '85'
            },
            {
                label: '创建人',
                prop: '创建人'
            },
            {
                label: '创建时间',
                prop: '创建时间'
            },
            {
                label: '审批人',
                prop: '审批人'
            },
            {
                label: '审批时间',
                prop: '审批时间'
            },
            {
                label: '备注',
                prop: '备注'
            }
        ],
        total: 0,
        currentPage: 1,
        pageCount: 1
    }
)

// 函数
onMounted(() => {
    // init()
})

function init() {
    tablePanelConfig.value.loading = true
    http.get(`${window.URL_CONFIG.VUE_APP_SYSTEM_API}/hr/hmc/pagin?p=${tablePanelConfig.value.currentPage}`).then(res => {
        if (res) {
            tablePanelConfig.value.tableData = res.data.ret
            tablePanelConfig.value.total = res.data.totalCount
            if (tablePanelConfig.value.currentPage === 1) {
                tablePanelConfig.value.pageCount = Math.ceil(res.data.totalCount / res.data.countPerPage)
            }
            tablePanelConfig.value.loading = false
        }
    }).catch(error => {
        console.log(error)
        tablePanelConfig.value.loading = false
    })
}

function handleCurrentChange(val) {
    tablePanelConfig.value.currentPage = val
    init()
}
</script>

<style lang="less" scoped>
.app-card {
    width: 100%;
    height: calc(100vh - 95px);
    padding: 5px;
}

.el-card-style {
    width: 100%;
    height: 100%;
    overflow: auto;
}
</style>
